<template>
	<div class="container">
    <div class="jx-return-container">
      <i class="iconfont icon-back" @click="back"></i>
      <span class="cube-title">
        <span>【{{this.$route.query.type || '--'}}】</span>
        <span>【{{this.$route.query.name || '--'}}】</span>
        产品设置
      </span>
    </div>
		<div class="jx-container">
      <div class="jx-table">
        <!-- <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          三方价格列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" :loading="boo.isExport" @click="exportRow">{{boo.isExport ? '请稍后……' : '导出'}}</el-button>
          </div>
        </div> -->
        <el-table :data="pricelist" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="55" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="institutionName" label="机构名称" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="registerAt" label="加入时间" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="serviceProductImgUrl" label="产品图片" width="130" align="center">
            <template slot-scope="scope">
              <img class="logo" :src="scope.row.serviceProductImgUrl"/>
            </template>
          </el-table-column>
          <el-table-column prop="serviceProductNo" label="产品编码" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="serviceProductName" label="产品名称" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="serviceProductCatalog" label="商品类型" align="center" >
          </el-table-column>
          <el-table-column prop="serviceProductInstitutionPrice" label="机构价格" width="150" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-input v-if="boo.isPrice" v-model="scope.row.serviceProductInstitutionPrice" @blur="changePrice(scope.row)"></el-input>
              <el-button v-else @click="editRow(scope.row)" type="text" size="small">{{scope.row.serviceProductInstitutionPrice}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="serviceProductInstitutionStatus" label="状态" align="center">
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <!-- <el-button v-if="scope.row.status == 1" @click="editRow(scope.row)" type="text" size="small">修改价格</el-button> -->
              <el-button @click="hiddenRow(scope.row)" type="text" size="small">{{scope.row.serviceProductInstitutionStatus == '启用' ? '终止' : '恢复'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="pricelist.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: this.$api.product.price,
        boo: {
          loading: false,
          isPrice: false,
        },
        other: {
          allRow: 1,
        },
        pricelist: '',
        params_list: {
          page: 1,
          size: 10,
          type: '',
          name: '',
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      back(){
        history.go(-1)
      },
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          orderBy: '',
          institutionId: this.$route.query.id,
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.pricelist = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.detail, params, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
      },
      hiddenRow(){
        
      },
      editRow(){
        let _self = this
        _self.boo.isPrice = true
      },
      changePrice(item){
        let _self = this
        _self.boo.isPrice = false
        let params = {
          serviceProductInstitutionPrice: item.serviceProductInstitutionPrice,
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.put(`${_self.https.edit}${item.serviceProductInstitutionId}`, params, success) 
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
</style>
